<template>
  <div>
    <ul class='mylist'>
      <li>
        <span>*</span><span>地区:</span>
        <input type="text"
               placeholder="请选择所在地区"
               v-model="strName"
               disabled>
      </li>
      <li>
        <span>*</span><span>标题:</span>
        <input type="text"
               placeholder="请填写标题"
               v-model='title'>
      </li>
      <li class='type'>
        <span>*</span><span>来源:</span>
        <p @click='changeType($event)'
           :class=" isActive=='1' ? 'active':'' "
           data-type='1'>个人</p>
        <p @click='changeType($event)'
           :class="isActive=='2' ? 'active':''"
           data-type='2'>经纪人</p>
      </li>
      <li>
        <span>*</span><span>面积:</span>
        <input type="number"
               placeholder="请填写面积"
               v-model='acreage'>
        <span class='right'>平方</span>
      </li>
      <!-- 类别 -->
      <li v-if='moid!=25'>
        <span>*</span><span>类别:</span>
        <van-radio-group v-model="radio"
                         v-if='moid==28'>
          <van-radio name="0"
                     checked-color="#07c160">不限
          </van-radio>
          <van-radio name="1"
                     checked-color="#07c160">出租
          </van-radio>
          <van-radio name="2"
                     checked-color="#07c160">出售
          </van-radio>
          <van-radio name="3"
                     checked-color="#07c160">招商
          </van-radio>
        </van-radio-group>
        <van-radio-group v-model="radio"
                         v-if='moid!=28'>
          <van-radio name="0"
                     checked-color="#07c160">不限
          </van-radio>

          <van-radio name="1"
                     checked-color="#07c160">求租
          </van-radio>

          <van-radio name="2"
                     checked-color="#07c160"
                     v-if='moid!=33'>出售
          </van-radio>
          <van-radio name="2"
                     checked-color="#07c160"
                     v-else-if='moid==33'>求购
          </van-radio>
        </van-radio-group>
      </li>

      <li>
        <span>*</span><span>租金:</span>
        <input type="number"
               placeholder="请选择发布商品类别"
               v-model='rent'>
        <span class='right'>元/m<sup>2</sup>/月</span>
      </li>
      <li v-if='moid==25'>
        <span>*</span><span>转让金:</span>
        <input type="number"
               placeholder="请填写转让金">
        <span class='right'>万元</span>
      </li>
      <li class='content'>
        <span>*</span><span>内容:</span>
        <textarea name=""
                  id=""
                  cols="30"
                  rows="10"
                  placeholder="请填写商品基本描述"
                  v-model='content'></textarea>
      </li>
      <li>
        <span>*</span><span>联系人:</span>
        <input type="text"
               placeholder="请填写联系人姓名"
               v-model='contact_who'>
      </li>
      <li>
        <span>*</span><span>电话:</span>
        <input type="text"
               placeholder="请填写联系人电话号码"
               v-model='tel'>
      </li>
      <li>
        <span></span><span>QQ号:</span>
        <input type="text"
               placeholder="请填写联系人QQ号"
               v-model='qq'>
      </li>
      <li>
        <span></span><span>邮箱:</span>
        <input type="text"
               placeholder="请填写联系人邮箱地址"
               v-model='email'>
      </li>
      <li class="bom">
        <span></span><span>详细地址:</span>
        <input type="text"
               placeholder="请填写详细地址"
               v-model='address'>
      </li>
      <li class="content">
        <span>*</span><span class="updateText">添加照片:</span>
        <p id="upload">
          <!--          <img src="../../../static/index/tu-9.jpg"-->
          <!--               alt=""-->
          <!--               @click='showAction()'>-->

          <van-uploader :after-read="afterRead" :deletable=false v-model="fileList" :max-count=9 :accept="'image/*'"/>
        </p>
      </li>
    </ul>
    <button class='issueBtn'
            @click='enterIssue'>发布
    </button>
  </div>
</template>
<script>
  import {getStore} from '../../config/mUtils'

  // import areaList from '../../assets/js/city.js';
  export default {
    props: ['catid', 'areaid', 'streetid', 'catname', 'strName'],
    name: "isdetail",
    data() {
      return {
        moid: '',//判断是哪个类别
        isActive: '1',//来源   1=>个人 2=>经纪人
        title: '',//标题
        acreage: '',//面积
        qq: '',
        email: "",
        tel: "",
        rent: "",//租金
        content: "",//详细内容
        img: [],
        contact_who: '',//联系人
        radio: '1',
        imgId: 0,
        isLogin: false,
        addressStr: "",
        address: '',
        fileList: []
      }
    },
    methods: {
      afterRead(content) {
        let _this = this
        this.$axios.post('user/appupload', this.qs.stringify({
          "token": getStore("token"),
          "img": content.content
        })).then((res) => {
          if ( res.data.status === 1 ) {
            this.$toast.success(res.data.message)
            let obj = res.data.data
            let resultObj = {}
            resultObj['path'] = obj.file
            resultObj['prepath'] = obj.thumb
            resultObj['image_id'] = this.imgId
            this.img.push(resultObj)
            this.imgId = this.imgId += 1

          } else {
            this.$toast.fail(res.data.message)
          }
        })
      },
      changeType(e) {
        if ( e.target.dataset.type == 1 ) {
          this.isActive = 1
        } else {
          this.isActive = 2
        }
      },
      enterIssue() {
        // console.log(this.catname);
        if ( !this.isLogin ) {
          this.$toast.fail('登录后才可发布!')
          return
        }
        var _this = this
        //发布
        if ( !this.title ) {
          this.$toast('请填写标题')
          return
        } else if ( !this.acreage ) {
          this.$toast('请填写面积')
          return
        } else if ( !this.email ) {
          this.$toast('请填写邮箱')
          return
        } else if ( !this.qq ) {
          this.$toast('请填写QQ')
          return
        } else if ( !this.rent ) {
          this.$toast('请填写租金')
          return
        } else if ( !this.content ) {
          this.$toast('请填写内容')
          return
        } else if ( !this.contact_who ) {
          this.$toast('请填写联系人')
          return
        } else if ( !this.fileList ) {
          this.$toast('请上传图片')
          return
        } else if ( !this.tel ) {
          this.$toast('请填写联系电话')
          return
        }
        var params = {
          areaid: this.areaid,
          catid: this.catid,
          streetid: this.streetid,
          title: this.title,
          position: this.isActive,
          danwei: '元/㎡/月',
          contact_who: this.contact_who,
          qq: this.qq,
          email: this.email,
          tel: this.tel,
          acreage: this.acreage,
          content: this.content,
          img: JSON.stringify(this.img),
          token: getStore('token'),
          cityid: getStore('cityid'),
          catname: this.catname,
          modid: this.moid,
          address: this.addressStr + this.address
        }
        switch (this.moid) {
          case 25:
            params['rent'] = _this.rent;
            // console.log('suc')
            break;
          case 28:
            params['store_zs'] = _this.rent;//价格
            params['lb_store'] = _this.radio//类别
            break;
          case 33:
            params['lb_qiu'] = _this.radio//类别
            params['store_zs'] = _this.rent;
            break;
          case 29:
          case 35:
            params['lb_qita'] = _this.radio//类别
            params['store_zs'] = _this.rent;
            break;
        }
        // console.log(params)
        params = this.qs.stringify(params)
        this.$axios.post('user/issue', params).then((res) => {
          if ( res.data.status == 1 ) {
            this.$toast.success('发布成功')
            this.$router.push({
              path: '/publish'
            })
          } else {
            this.$toast.fail(res.data.message)
          }
        })
      },
      getMoid() {
        //根据类别id 去换取 moid  区分 显示内容 和接口需要的字段
        var params = this.qs.stringify({
          catid: this.catid
        })
        this.$axios.post('category/getModelId', params).then((res) => {
          this.moid = res.data.data
          //29=>写字楼 25=>商铺转让  28=>商铺租售    35=>厂房仓库  33=>求租求购
          // console.log(this.moid)
        })
      },
    },
    created() {
      this.getMoid()
      this.isLogin = !!(getStore("token") || getStore("userName"));
      this.addressStr = getStore('cityname') + this.catname + this.strName
    }
  }
</script>
<style scoped>
  @import url("../../assets/css/issue.css");

  .issueBtn {
    background-color: #c30000;
    color: #fff;
    height: 90px;
    width: 90%;
    margin: 30px auto;
    display: block;
    font-size: 32px;
  }

  .mylist >>> .van-radio-group {
    display: flex;
  }

  .mylist >>> .van-radio {
    margin: 0 10px;
  }

  .mylist >>> .van-radio__label {
    margin: 0;
  }
  .updateText {
    width: 120px;
    display: block;
  }
</style>
